<template>
  <el-container class="index-container">
    <el-aside width="auto">
      <SideBar />
    </el-aside>
    <el-container>
      <el-header>
        <Header />
      </el-header>
      <div class="bread">
        <div class="bLeft" id="tabScrollable">
          <el-tag
            size="large"
            effect="light"
            color="#fff"
            @click="firstTagTo(mainStore.firstChildMenu?.routerPath as string)"
            :class="{
              tagColor: mainStore.currentPath?.path === mainStore.firstChildMenu?.routerPath
            }"
          >
            {{ mainStore.firstChildMenu?.menuName }}
          </el-tag>
          <el-tag
            v-for="tag in mainStore.routeTags"
            :key="tag.name"
            closable
            size="large"
            effect="light"
            color="#fff"
            @click="tagTo(tag)"
            @close="tagClose(tag)"
            :class="{
              tagColor:
                mainStore.currentPath?.path === tag.path &&
                isEqual(tag.query, mainStore.currentPath.query)
            }"
          >
            {{ tag.name }}
          </el-tag>
        </div>
        <div class="bRight">
          <el-tag
            v-if="mainStore.routeTags.length > 1"
            size="large"
            effect="light"
            color="#fff"
            @click="colseAll"
          >
            全部关闭
          </el-tag>
        </div>
      </div>
      <el-main>
        <Context />
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import Header from '@/components/layout/Header.vue'
import SideBar from '@/components/layout/SideBar.vue'
import Context from '@/components/layout/Context.vue'
import { getUserProfile } from '@/api/index'
import { useMainStore } from '@/stores/mainStore'
import { addDynamicRoute } from '@/router/index'
import { type LocationQueryRaw } from 'vue-router'
import { isEqual } from 'es-toolkit'

const router = useRouter()
const route = useRoute()

const mainStore = useMainStore()

// 获取用户信息和权限
onBeforeMount(async () => {
  // 默认激活
  mainStore.currentPath = { path: route.path, query: route.query }
  // 新增路由
  await addDynamicRoute(mainStore.menus)
  getUserProfile().then((res) => {
    mainStore.userProfile = res.data
  })
})

onMounted(() => {
  const scrollable = window.document.getElementById('tabScrollable')
  scrollable?.addEventListener('wheel', function (event) {
    if (event.deltaY !== 0) {
      scrollable.scrollLeft += event.deltaY
      event.preventDefault()
    }
  })
})

// 第一个标签跳转
function firstTagTo(path: string) {
  mainStore.currentPath = { path, query: {} }
  router.push({
    path: path
  })
}

// 标签跳转
function tagTo(tag: RouteTag) {
  mainStore.currentPath = { path: tag.path, query: tag.query }
  router.push({
    path: tag.path,
    query: tag.query as LocationQueryRaw
  })
}

// 标签关闭
function tagClose(tag: RouteTag) {
  let index = mainStore.routeTags.findIndex((item) => {
    return item.path === tag.path && isEqual(item.query, tag.query)
  })
  if (index > -1) {
    mainStore.routeTags.splice(index, 1)
    let toPath
    let query
    if (index === 0) {
      toPath = mainStore.firstChildMenu?.routerPath
      query = {}
    } else {
      toPath = mainStore.routeTags[index - 1].path
      query = mainStore.routeTags[index - 1].query
    }
    if (tag.path === mainStore.currentPath?.path && tag.path === mainStore.currentPath?.path) {
      router.push({
        path: toPath,
        query: query as LocationQueryRaw
      })
      mainStore.currentPath = { path: toPath as string, query }
    }
  }
}

// 全部关闭
function colseAll() {
  mainStore.routeTags.length = 0
  router.push({
    path: mainStore.firstChildMenu?.routerPath
  })
  mainStore.currentPath = { path: mainStore.firstChildMenu?.routerPath as string, query: {} }
}
</script>

<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 100%;

  .el-header {
    background-color: #fff;
    height: 64px;
    box-shadow: 0 0px 5px 0 rgba(128, 128, 128, 0.3);
  }
  .el-aside {
    background-color: #001529;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow: -moz-hidden-unscrollable;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .bread {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;

    .bLeft {
      height: 60px;
      display: flex;
      align-items: center;
      margin-right: 15px;
      padding: 0;
      overflow-x: auto; /* 横向滚动 */
      white-space: nowrap;
      scrollbar-width: none; /* 适用于 Firefox */
    }
    .bLeft::-webkit-scrollbar {
      display: none; /* 隐藏滚动条 */
    }

    .el-tag.el-tag--primary {
      --el-tag-border-color: #fff !important;
    }

    .el-tag.el-tag--primary {
      --el-tag-text-color: #2d4a61;
      --el-tag-hover-color: gray;
    }

    .el-tag {
      height: 34px;
      font-size: 14px;
      color: #2d4a61;
      margin-right: 12px;
      &:hover {
        cursor: pointer;
      }
    }

    .tagColor {
      color: #1677ff !important;
    }
  }
  .el-main {
    height: 100%;
    padding: 0px;
    margin: 10px;
    margin-top: 0;

    /* 自定义滚动条 */
    &::-webkit-scrollbar {
      width: 6px; /* 滚动条的宽度 */
      height: 6px;
    }

    /* 自定义滚动条 */
    &::-webkit-scrollbar {
      width: 6px; /* 滚动条的宽度 */
    }

    &::-webkit-scrollbar-track {
      background: #ffffff00; /* 滚动条轨道的背景色 */
    }

    &::-webkit-scrollbar-thumb {
      background: #c5c5c5; /* 滚动条拇指的背景色 */
      border-radius: 6px; /* 滚动条拇指的圆角 */
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #3e3e3e8e; /* 滚动条拇指在鼠标悬停时的背景色 */
    }
  }
}
</style>
